import st from "./manager.module.css";
import Header from "../../componets/Header";
import Menu from "../../componets/Menu";

import YHD from "@/assets/img/yhd.svg";
import JHD from "@/assets/img/jhd.svg";
import TBD from "@/assets/img/tbd.svg";
import QTRKD from "@/assets/img/qtrkd.svg";
import PDD from "@/assets/img/pdd.svg";
import KCCX from "@/assets/img/kccx.svg";
import QTCKD from "@/assets/img/qtckd.svg";
import ZTHX from "@/assets/img/zthx.svg";
import TCPS from "@/assets/img/tcps.svg";
import RA from "@/assets/img/rightarrow.svg";
import MYVIP from "@/assets/img/myvip.svg";

const Manager = () => {
  // 自定义卡片配置
  const mdgl = [
    { name: "要货单", src: YHD },
    { name: "进货单", src: JHD },
    { name: "调拨单", src: TBD },
    { name: "其他入库单", src: QTRKD },
    { name: "其他出库单", src: QTCKD },
    { name: "盘点单", src: PDD },
    { name: "库存查询", src: KCCX },
  ];
  const wdhy = [{ name: "我的会员", src: MYVIP }];

  return (
    <div className={st.container}>
      <Header singleText={true}>管店</Header>
      <div className={st.main}>
        <Menu config={mdgl}>门店管理</Menu>
        <Menu config={wdhy}>会员管理</Menu>
        <Menu config={mdgl}>单据历史</Menu>
        <Menu
          comp={[
            <MenuOrder
              src={ZTHX}
              title={"自提核销"}
              text={"待核销20单"}
              key={1}
            />,
            <MenuOrder
              src={TCPS}
              title={"同城配送"}
              text={"待配送102单"}
              key={2}
            />,
          ]}
        >
          商城订单
        </Menu>
      </div>
    </div>
  );
};

const MenuOrder = ({ src, title, text }: any) => {
  return (
    <div className={st.orderBox}>
      <img src={src} alt="" className={st.orderImg}/>
      <div className={st.orderRight}>
        <div>
          <span className={st.orderTitle}>{title}</span>
          <img className={st.rightIcon} src={RA}></img>
        </div>
        <div className={st.orderText}>{text}</div>
      </div>
    </div>
  );
};
export default Manager;
